<template>
  <div>
    <input type="number" :max="100" :min="0" v-model="percent" />
    <div class="progress"></div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
defineOptions({
  name: 'ChartPage',
})
const percent = ref(0)
const top = computed(() => 100 - percent.value + '%')
</script>
<style lang="scss" scoped>
.progress {
  --progress-width: 200px;
  --progress-mark-width: 500px;
  height: var(--progress-width);
  width: var(--progress-width);
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  &::after {
    content: '';
    width: var(--progress-mark-width);
    height: var(--progress-mark-width);
    display: block;
    position: absolute;
    top: v-bind(top);
    left: calc((var(--progress-width) - var(--progress-mark-width)) / 2);
    background-color: var(--primary-light-color);
    border-radius: calc(var(--progress-width));
    animation: spin 5s linear infinite;
    opacity: 0.6;
    transition: top 0.25s;
  }
  &::before {
    content: '';
    width: var(--progress-mark-width);
    height: var(--progress-mark-width);
    display: block;
    position: absolute;
    top: calc(v-bind(top) - 5px);
    left: calc((var(--progress-width) - var(--progress-mark-width)) / 2);
    background-color: var(--primary-light-color);
    border-radius: calc(var(--progress-width));
    animation: spin 7s linear infinite;
    opacity: 0.8;
    transition: top 0.25s;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
